<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1>
            {{content}}
        </h1>
        <button :class="{active:index+1===page}" v-for="(item,index) in buttons" :key="index" @click="pageChange(index+1)">第{{index+1}}页</button>
    </fieldset>  
</template>
<script setup>
import {ref,onMounted,reactive,watchEffect} from "vue"
import CancelPromise from "./cancelPromise"
let api1=(signal)=>new CancelPromise((resolve,reject)=>{
    //模拟3个请求，响应的时间不一样
    setTimeout(()=>{
        resolve('第一页的数据')
    },1000)
},signal)
let api2=(signal)=>new CancelPromise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('第二页的数据')
    },1500)
},signal)
let api3=(signal)=>new CancelPromise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('第三页的数据')
    },2000)
},signal)
//模拟请求
let api={
    api1,
    api2,
    api3
}
let buttons=reactive(['第1页','第2页','第3页'])
//声明一个响应式的变量
let content=ref("")
//声明一个三方的响应式变量来作为按钮的激活条件
let page=ref(1)
//点击分页获取分页数据
let pageChange=(pageSize)=>{
   fetchData(pageSize)
   //给三方作为激活条件的变量进行赋值
   page.value=pageSize
}
//封装一个获取内容的方法
/**
 * 
 * @param {Number} pageSize 传递给后台的页码
 * @param {Object} signal 控制器(AbortController)的signal对象
 */
let fetchData=(pageSize=1,signal)=>(
    api['api'+pageSize](signal)
    .then(res=>{
        console.log(res)
        content.value=res
    })
)
//使用watchEffect
watchEffect(invalidate=>{
    //声明一个控制
    let abortController=new AbortController()
    //获取signal对象
    let signal=abortController.signal
    //发起请求，并且传入signal对象
    fetchData(page.value,signal)
    invalidate(()=>{
        //页面切换之前，取消上一个promise
        abortController.abort()
    })
})
//页面加载的时候，获取第一页的数据
// onMounted(()=>{
//     fetchData(1)
// })
</script>
<style>
.active{
    background-color: hotpink;
}
</style>